<template>
  <!--分析报表-->
  <el-row style="height:100%">
    <page report="true" :isreportHome="true">
      <div class="compDiv">
        <companyTimeAdd :ref="'compAdd'" :compId="compId" :tags="1">
          <el-button type="primary" size="small" class="reportHomeRefresh" @click="refresh" :disabled="isButDisabled"
                     icon="el-icon-refresh-right">{{'刷新'+(isButDisabled?'('+countDown+')':'')}}
          </el-button>
        </companyTimeAdd>
      </div>
      <div class="compDiv">
        <companyDistri :ref="'compD'" :compId="compId" :tags="1"></companyDistri>
      </div>
      <div class="compDiv">
        <companyTime :ref="'compT'" :compId="compId" :tags="1"></companyTime>
      </div>
    </page>
  </el-row>
</template>

<style>
  .reportHomeRefresh {
    float: right;
    margin-top: -8px;
  }

  .compDiv {
    width: 100%;
    height: 500px;
  }
</style>
<script>
  import Cascader from "@/components/sys/assembly/elcascader";
  import page from "@/components/page/page";
  import companyTime from "@/components/report-form/mall-report-common/companyTimeEcharts";
  import companyTimeAdd from "@/components/report-form/mall-report-common/companyTimeAdd";
  import companyDistri from "@/components/report-form/mall-report-common/companyDistri";

  export default {
    data() {
      return {
        compId: "",
        isButDisabled: false,
        countDown: 0,
      }
    },
    components: {
      Cascader,
      page,
      companyTime,
      companyDistri,
      companyTimeAdd
    },
    created() {
      //将菜单选中状态设置为空
      localStorage.reportactive = '';
      localStorage.reportopened = '';
    },

    mounted() {
      setTimeout(() => {
        window.onresize = () => {
          this.$refs.compT.loadEchartResize("");
          this.$refs.compD.loadEchartResize("");
          this.$refs.compAdd.loadEchartResize("");
        };
      }, 200);
      this.$Bus.$on('companyData', data => {
        this.compId = data.id;
        this.$Bus.$emit('Loading', false);
      })
    },
    methods: {
      refresh() {
        this.isButDisabled = true;
        this.countDown = 10;
        this.$refs.compT.getData(this.compId);
        this.$refs.compD.getData(this.compId);
        this.$refs.compAdd.checkInterval(this.compId);
        let times = setInterval(() => {
          this.countDown--;
        }, 1000)
        setTimeout(() => {
          this.isButDisabled = false;
          clearInterval(times);
        }, 10000)
      }
    },
    //注销window.onresize事件
    beforeDestroy() {
      window.onresize = null;
      this.$Bus.$off('companyData');
    }
  }
</script>
